<template>
  <div class="boxcard">
    <span class="text">Border Utilities</span>
    <p>Bootstrap's default utility classes can be found on the official <a
        href="https://getbootstrap.com/docs">Bootstrap Documentation</a> page. The custom utilities
      below were created to extend this theme past the default utility classes built into Bootstrap's
      framework. </p>
    <el-row>
      <el-col :span="24" :md="{ span: 12 }">
        <div v-for="item in borderleft" :key="item.name" :class="item.class">{{ item.name }}</div>
      </el-col>
      <el-col :span="24" :md="{ span: 12 }">
        <div v-for="item in borderbuttom" :key="item.name" :class="item.class">{{ item.name }}</div>
      </el-col>
    </el-row>
  </div>
</template>

<script>
import { borderleft, borderbuttom } from "../../utils/common_date"
export default {
  name: 'border',
  data() {
    return {
      borderleft,
      borderbuttom,
    }
  }
}
</script>

<style scoped lang="less">
@import '../../assets/less/common.less';


p {
  padding: 0 15px;
  color: rgb(136, 139, 157);
  font-size: 16px;
  font-weight: 400;
  line-height: 24px;
  text-decoration: none;
}

p>a {
  text-decoration: none;
}

.bluebox {
  width: 90%;
  height: 80px;
  border-radius: 5px;
  padding: 10px;
  color: rgb(133, 135, 150);
  flex-basis: auto;
  margin-left: 20px;
  font-size: 16px;
  font-weight: 400;
  line-height: 80px;
  border: 1px solid #e3e6f0;
}

.greyleft {
  border-left: .25rem solid #858796 !important;
  margin-top: 20px;
}

.greenleft {
  border-left: .25rem solid #1cc88a !important;
  margin-top: 20px;
}

.bluegreenleft {
  border-left: .25rem solid #36b9cc !important;
  margin-top: 20px;
}

.yellowleft {
  border-left: .25rem solid #f6c23e !important;
  margin-top: 20px;
}

.redleft {
  border-left: .25rem solid #e74a3b !important;
  margin-top: 20px;
}

.darkleft {
  border-left: .25rem solid #5a5c69 !important;
  margin-top: 20px;
}

.greybottom {
  border-bottom: .25rem solid #858796 !important;
  margin-top: 20px;
}

.greenbottom {
  border-bottom: .25rem solid #1cc88a !important;
  margin-top: 20px;
}

.bluegreenbottom {
  border-bottom: .25rem solid #36b9cc !important;
  margin-top: 20px;
}

.yellowbottom {
  border-bottom: .25rem solid #f6c23e !important;
  margin-top: 20px;
}

.redbottom {
  border-bottom: .25rem solid #e74a3b !important;
  margin-top: 20px;
}

.darkbottom {
  border-bottom: .25rem solid #5a5c69 !important;
  margin-top: 20px;
}

.bulebottom {
  border-bottom: .25rem solid #4e73df !important;
  margin-top: 20px;
}

.buleleft {
  border-left: .25rem solid #4e73df !important;
  margin-top: 20px;
}
</style>